<Configure> (React InstantSearch v7)

A component for React InstantSearch. to provide search parameters to Algolia.

The <Configure> component lets you provide raw search parameters to the Algolia API without rendering anything.

Any props you pass to this component are forwarded to Algolia.

Don’t make the widget itself conditional, for example, in a ternary statement. Doing so creates an infinite loop.

Usage

  import { Configure } from 'react-instantsearch';

  import { Configure } from 'react-instantsearch';

JSX

import React from 'react';
import { liteClient as algoliasearch } from 'algoliasearch/lite';
import { InstantSearch, Configure } from 'react-instantsearch';

const searchClient = algoliasearch('undefined', 'undefined');

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <Configure
        analytics={false}
        filters="free_shipping:true"
        hitsPerPage={40}
      />
    </InstantSearch>
  );
}

Demo

Props

searchParameters · object

A list of search parameters to enable.

Hook

To create your own UI for the <Configure> component, use the useConfigure` Hook. Hooks provide APIs to access the component state and interact with InstantSearch.

The useConfigure() Hook accepts parameters and returns APIs.

Usage

1. Create your React component

   JSX

   import { useConfigure } from 'react-instantsearch';
   
   function CustomConfigure(props) {
   const { refine } = useConfigure(props);
   
   return null;
   }
   

2. Render the widget

   JSX

   <CustomConfigure {...searchParameters} />
   

Hook parameters

Hooks accept parameters. You can pass them manually, or forward the props from your custom component.

...searchParameters · searchParameters

A list of search parameters to enable. It returns an object with a refine function that you can use to replace the provided search parameters with new ones.

JavaScript

const configureApi = useConfigure({
  hitsPerPage: 4,
  analytics: false,
  distinct: true,
});

When you provide a function to Hooks, make sure to pass a stable reference to avoid rendering endlessly (for example, with useCallback()). Objects and arrays are memoized: you don’t need to stabilize them.

Hook APIs

Hooks return APIs, such as state and functions. You can use them to build your UI and interact with React InstantSearch.

refine · (value: SearchParameters) => void

Replaces the provided search parameters with new ones.

JSX

const { refine } = useConfigure({
  hitsPerPage: 4,
});

return (
  <button onClick={() => refine({ hitsPerPage: 8 })}>
    Show 8 hits per page
  </button>
);

Hook example

JSX

import React from 'react';
import { useConfigure } from 'react-instantsearch';

function CustomConfigure(props) {
    useConfigure(props);

    return null;
}